<template>
  <div>
    <el-menu
      :collapse="isCollapse"
      :default-active="$route.path"
      unique-opened
      :router="true"
      class="el-menu-vertical-demo">
      <template v-for="(item,i) in $store.state.permission.menu" >
        <el-submenu :index="item.url" :key="i" v-if="item.isShow == 1">
          <template slot="title">
            <i :class="item.icon" style="color: #409EFF"></i>
            <span>{{item.name}}</span>
          </template>
          <template v-for="(subItem,k) in item.children">
            <el-menu-item :index="subItem.url" :key="k" v-if="subItem.isShow == 1">
              <i :class="subItem.icon" style="color: #409EFF"></i>
              {{subItem.name}}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
  export default {
    name: "sidebar",
    props: {
      isCollapse: Boolean
    },
    created() {

    },
  }
</script>

<style lang="scss" scoped>
  .el-menu-vertical-demo{
    height: 100vh;
    overflow-y: auto;
    &:not(.el-menu--collapse){
      width: 15vw;
      height: 100vh;
      overflow-y: auto;
    }
  }
  ::v-deep *{
    background: rgba(255,255,255,0);
  }
</style>
